<template>
  <div>
    <el-menu mode='horizontal' @select='handleSelect'>
      <el-submenu index='file'>
        <template slot='title'>文件</template>
        <el-menu-item index='new'>新建</el-menu-item>
        <el-menu-item index='open'>打开</el-menu-item>
        <el-menu-item index='save'>保存</el-menu-item>
        <el-menu-item index='saveAs'>另存为</el-menu-item>
        <el-menu-item index='customizeNode'>自定义节点</el-menu-item>
        <el-menu-item index='openLocal'>打开本地文件</el-menu-item>
        <el-menu-item index='saveLocal'>保存本地文件</el-menu-item>
        <el-menu-item index='print'>打印</el-menu-item>
      </el-submenu>
      <el-submenu index='edit'>
        <template slot='title'>编辑</template>
        <el-menu-item index='redo' :disabled='!$store.state.graphModule.canRedo'
          >撤销</el-menu-item
        >
        <el-menu-item index='undo' :disabled='!$store.state.graphModule.canUndo'
          >恢复</el-menu-item
        >
        <el-menu-item index='cut' :disabled='!$store.state.graphModule.canCut'
          >剪切</el-menu-item
        >
        <el-menu-item index='copy' :disabled='!$store.state.graphModule.canCopy'
          >复制</el-menu-item
        >
        <el-menu-item index='paste' :disabled='!$store.state.graphModule.canPaste'
          >粘贴</el-menu-item
        >
        <el-menu-item index='delete' :disabled='!$store.state.graphModule.canDelete'
          >删除</el-menu-item
        >
      </el-submenu>
      <el-submenu index='align'>
        <template slot='title'>对齐</template>
        <el-menu-item index='leftAlign'>左对齐</el-menu-item>
        <el-menu-item index='rightAlign'>右对齐</el-menu-item>
        <el-menu-item index='topAlign'>上对齐</el-menu-item>
        <el-menu-item index='bottomAlign'>下对齐</el-menu-item>
        <el-menu-item index='centerAlign'>中心对齐</el-menu-item>
        <el-menu-item index='equalWidth'>等宽</el-menu-item>
        <el-menu-item index='equalHeight'>等高</el-menu-item>
        <el-menu-item index='equalSize'>等大</el-menu-item>
      </el-submenu>
      <el-submenu index='graph'>
        <template slot='title'>操作</template>
        <el-menu-item index='selectAll'>选择所有</el-menu-item>
        <el-menu-item index='unSelectAll'>取消选择所有</el-menu-item>
        <el-menu-item index='zoomIn'>放大</el-menu-item>
        <el-menu-item index='zoomOut'>缩小</el-menu-item>
        <el-menu-item index='zoomRestore'>还原</el-menu-item>
        <el-menu-item index='showGrid'>显示网格</el-menu-item>
        <el-menu-item index='hideGrid'>隐藏网格</el-menu-item>
        <el-menu-item index='autoConnect'>自动连接</el-menu-item>
      </el-submenu>
    </el-menu>

    <input id='files' ref='filElem' type='file' v-show='false' @input='getFile'/>

    <new-graph-file-dialog v-if="newGraphFileDialogVisible" ref="newGraphFileDialog" 
    @submit="handleNewFileDialogSubmit">
    </new-graph-file-dialog>
    <open-graph-file-dialog v-if="openGraphFileDialogVisible" ref="openGraphFileDialog">
    </open-graph-file-dialog>    

    <create-node-dialog v-if="createNodeDialogVisible" ref="createNodeDialog"></create-node-dialog>
  </div>
</template>

<script>
import { addGraphFile } from '@/api/draw.js'
import UIUtil from '@/utils/graph-utils/uiUtil.js'
import HeaderUtil from '@/utils/graph-utils/headerUtil.js'
import NewGraphFileDialog from '@/views/drawTool/dialog/new-graph-file-dialog.vue'
import OpenGraphFileDialog from '@/views/drawTool/dialog/open-graph-file-dialog.vue'
import CreateNodeDialog from '@/views/drawTool/dialog/create-node-dialog.vue'

export default {
  name: 'HeaderPanel',
  components: { NewGraphFileDialog, OpenGraphFileDialog, CreateNodeDialog },
  data() {
    return {
      fileList: [],
      newGraphFileDialogType: 'new',

      newGraphFileDialogVisible: false,
      openGraphFileDialogVisible: false,
      createNodeDialogVisible: false
    }
  },
  watch: {
    '$store.state.graphModule.newGraphFileFlag': function(val) {
      this.handleShowNewGraphFileDialog()
    },
    '$store.state.graphModule.openGraphFileFlag': function(val) {
      this.openGraphFileDialogVisible = true
      this.$nextTick(() => {
        this.$refs.openGraphFileDialog.showDialog()
      })
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      var graph = this.$store.state.graphModule.graph
      switch (index) {
        case 'new':
          this.newGraphFileDialogType = 'new'
          this.$store.commit('newGraphFile')
          break
        case 'open':
          this.$store.commit('openGraphFile')
          break
        case 'save':
          HeaderUtil.handleSave(this, graph, false)
          break
        case 'saveAs':
          this.newGraphFileDialogType = 'saveAs'
          this.$store.commit('newGraphFile')
          break
        case 'customizeNode':
          this.handleShowCreateNodeDialog()
          break
        case 'openLocal':
          document.getElementById('files').click()
          break
        case 'saveLocal':
          HeaderUtil.handleSave(this, graph, true)
          break
        case 'redo':
          HeaderUtil.handleRedo(graph)
          break
        case 'undo':
          HeaderUtil.handleUndo(graph)
          break
        case 'cut':
          HeaderUtil.handleCut(graph)
          break
        case 'copy':
          HeaderUtil.handleCopy(graph)
          break
        case 'paste':
          HeaderUtil.handlePaste(graph)
          break
        case 'delete':
          HeaderUtil.handleDelete(graph)
          break
        case 'leftAlign':
          HeaderUtil.handleLeftAlign(graph)
          break
        case 'rightAlign':
          HeaderUtil.handleRightAlign(graph)
          break
        case 'topAlign':
          HeaderUtil.handleTopAlign(graph)
          break
        case 'bottomAlign':
          HeaderUtil.handleBottomAlign(graph)
          break
        case 'centerAlign':
          HeaderUtil.handleCenterAlign(graph)
          break
        case 'equalWidth':
          HeaderUtil.handleEqualWidth(graph)
          break
        case 'equalHeight':
          HeaderUtil.handleEqualHeight(graph)
          break
        case 'equalSize':
          HeaderUtil.handleEqualSize(graph)
          break
        case 'selectAll':
          HeaderUtil.handleSelectAll(graph)
          break
        case 'unSelectAll':
          HeaderUtil.handleUnSelectAll(graph)
          break
        case 'zoomIn':
          HeaderUtil.handleZoomIn(graph)
          break
        case 'zoomOut':
          HeaderUtil.handleZoomOut(graph)
          break
        case 'zoomRestore':
          HeaderUtil.handleZoomRestore(graph)
          break
        case 'showGrid':
          HeaderUtil.handleShowOrHideGrid(graph, true)
          break
        case 'hideGrid':
          HeaderUtil.handleShowOrHideGrid(graph, false)
          break
        case 'handleAutoConnect':
          HeaderUtil.handleAutoConnect(graph)
          break
        default:
          break
      }
    },

    getFile() {
      var that = this
      var graph = this.$store.state.graphModule.graph
      const inputFile = this.$refs.filElem.files[0]
      if (inputFile) {
        if (inputFile.type !== 'text/plain') {
          that.$alert('请选择普通文本文件')
          return
        }
        const reader = new FileReader()
        reader.readAsText(inputFile)
        reader.onload = function(e) {
          try {
            var json = JSON.parse(this.result)
            HeaderUtil.handleOpen(graph, json)
          } catch (e) {
            that.$alert('文件内容转换为json失败,请选择正确的文件!')
          }
        }
      }
    },

    handleShowNewGraphFileDialog() {
      this.newGraphFileDialogVisible = true
      this.$nextTick(() => {
        this.$refs.newGraphFileDialog.showDialog()
      })
    },

    handleShowCreateNodeDialog() {
      this.createNodeDialogVisible = true
      this.$nextTick(() => {
        this.$refs.createNodeDialog.showDialog()
      })
    },

    handleNewFileDialogSubmit(graphFile) {
      const self = this
      if (this.newGraphFileDialogType === 'new') {
        addGraphFile(graphFile).then(response => {
          UIUtil.successMessage('新建图形文件成功')
          self.$store.commit('addGraphTab', response.data)
        }).catch(() => {
          UIUtil.failMessage('新建图形文件失败')
        })
      } else {
        addGraphFile(graphFile).then(response => {
          const newGraphFile = response.data
          UIUtil.successMessage('另存为图形文件成功')
          // 另存为是将当前文件的内容存到新文件中
          const graph = self.$store.state.graphModule.graph
          const oldCurrentGraphFile = self.$store.state.graphModule.currentGraphFile
          self.$store.commit('setCurrentGraphFile', newGraphFile)
          HeaderUtil.handleSave(self, graph, false)
          self.$store.commit('setCurrentGraphFile', oldCurrentGraphFile)
        }).catch(() => {
          UIUtil.failMessage('另存为图形文件失败')
        })
      }
    }
  }
}
</script>